<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='个人资料',active='user'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/css/fileinput.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>

    <!-- 如果你想在上传之前修改图片大小需要加入canvas-to-blob.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>

    <!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js"></script>

    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/dompurify/1.0.10/purify.min.js"></script>

    <!-- 主要的 fileinput 插件库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

    <!-- 如果你想在放大的模态页面中查看文件详细信息需要引入bootstrap.js -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/fa.min.js"></script>

    <!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/zh.min.js"></script>

    <style>
        .topbar {
            height: 70px;
        }
    </style>


</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">


                <div class="row">
                    <div class="col-md-6">
                        <div th:class="'panel panel-'+ ${bootstrap.randomColor()}+' panel-inverse'">

                            <div class="panel-heading">
                                <h3 class="panel-title">个人资料</h3>
                            </div>
                            <div class="panel-body">
                                <form method="post" th:action="@{/myuser/uploadIcon}" class="form-horizontal"
                                      role="form" id="global-form" enctype="multipart/form-data">
                                    <input th:value="${curName}" name="name" type="hidden" class="form-control" required
                                           aria-required="true"/>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">邮箱：</label>
                                        <div class="col-md-9"
                                             th:if="${user.getEmail()} ne null and ${user.getEmail()} ne ''">
                                            <input id="email1" th:value="${user.getEmail()}" name="email" type="email"
                                                   class="form-control" placeholder="邮箱" aria-required="true"/>
                                        </div>
                                        <div class="col-md-9"
                                             th:if="${user.getEmail()} eq null or ${user.getEmail()} eq ''">
                                            <input id="email1" name="email" type="email" class="form-control"
                                                   placeholder="邮箱" aria-required="true"/>
                                        </div>
                                    </div>

                                    <label class="col-md-3 control-label">头像：</label>
                                    <div th:if="${user.getUserDetail().getIcon()} eq null or ${user.getUserDetail().getIcon()} eq ''"
                                         class="row" style="height: 400px;width: 400px;margin-left: 130px">

                                        <input id="uploadPicture" name="file" type="file"
                                               class="file-loading">

                                    </div>

                                    <div th:if="${user.getUserDetail().getIcon()} ne null and ${user.getUserDetail().getIcon()} ne ''"
                                         class="row" style="height: 400px;width: 400px;margin-left: 130px">
                                        <input id="uploadPicture" th:utext="'图片地址:'+${user.getUserDetail().getIcon()}"
                                               th:value="${user.getUserDetail().getIcon()}" name="file" type="file"
                                                class="file-loading">
                                    </div>


                                    <div class="form-group">
                                        <label class="col-md-3 control-label">博客名称：</label>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getBlogName()} ne null and ${user.getUserDetail().getBlogName()} ne ''">
                                            <input type="text" th:value="${user.getUserDetail().getBlogName()}"
                                                   name="blogName" class="form-control" placeholder="博客名称"
                                                   aria-required="true"/>
                                        </div>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getBlogName()} eq null or ${user.getUserDetail().getBlogName()} eq ''">
                                            <input type="text" name="blogName" class="form-control" placeholder="博客名称"
                                                   aria-required="true"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">职位：</label>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getJob()} ne null and ${user.getUserDetail().getJob()} ne ''">
                                            <input type="text" th:value="${user.getUserDetail().getJob()}" name="job"
                                                   class="form-control" placeholder="职位" aria-required="true"/>
                                        </div>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getJob()} eq null or ${user.getUserDetail().getJob()} eq ''">
                                            <input type="text" name="job" class="form-control" placeholder="职位"
                                                   aria-required="true"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">个人说明：</label>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getDetail()} ne null and ${user.getUserDetail().getDetail()} ne ''">
                                            <input type="text" th:value="${user.getUserDetail().getDetail()}"
                                                   name="detail" class="form-control" placeholder="个人说明"
                                                   aria-required="true"/>
                                        </div>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getDetail()} eq null or ${user.getUserDetail().getDetail()} eq ''">
                                            <input type="text" name="detail" class="form-control" placeholder="个人说明"
                                                   aria-required="true"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">GitHub：</label>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getGithub()} ne null and ${user.getUserDetail().getGithub()} ne ''">
                                            <input type="text" th:value="${user.getUserDetail().getGithub()}"
                                                   name="github" class="form-control" placeholder="GitHub"
                                                   aria-required="true"/>
                                        </div>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getGithub()} eq null or ${user.getUserDetail().getGithub()} eq ''">
                                            <input type="text" name="github" class="form-control" placeholder="GitHub"
                                                   aria-required="true"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">微博：</label>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getWeibo()} ne null and ${user.getUserDetail().getWeibo()} ne ''">
                                            <input type="text" th:value="${user.getUserDetail().getWeibo()}"
                                                   name="weibo" class="form-control" placeholder="微博"
                                                   aria-required="true"/>
                                        </div>
                                        <div class="col-md-9"
                                             th:if="${user.getUserDetail().getWeibo()} eq null or ${user.getUserDetail().getWeibo()} eq ''">
                                            <input type="text" name="weibo" class="form-control" placeholder="微博"
                                                   aria-required="true"/>
                                        </div>
                                    </div>


                                    <div class="clearfix pull-right">
                                        <button id="btn1" type="submit"
                                                th:class="'btn btn-'+${bootstrap.randomColor()}+ ' waves-effect waves-light'">
                                            保存资料
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div th:class="'panel panel-'+ ${bootstrap.randomColor()}+' panel-inverse'">
                            <div class="panel-heading">
                                <h3 class="panel-title">修改密码</h3>
                            </div>
                            <div class="panel-body">
                                <form method="post" th:action="@{/myuser/updatePassword}" autocomplete="off"
                                      class="form-horizontal" role="form" id="advanced-form">

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">原密码；</label>
                                        <div class="col-md-9">
                                            <input type="password" class="form-control" required name="oldPassword"
                                                   placeholder="原密码"/>
                                            <span class="help-block"><small>您需要知道你以前的密码</small></span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">新密码：</label>
                                        <div class="col-md-9">
                                            <input type="password" class="form-control" required name="newPassword1"
                                                   placeholder="你的新密码"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-md-3 control-label">确认新密码：</label>
                                        <div class="col-md-9">
                                            <input type="password" class="form-control" required name="newPassword2"
                                                   placeholder="请再一次输入新密码"/>
                                        </div>
                                    </div>


                                    <div class="clearfix pull-right">
                                        <button type="submit"
                                                th:class="'btn btn-'+${bootstrap.randomColor()}+ ' waves-effect waves-light'">
                                            确认修改
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>


                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<!--<div th:replace="back/footer :: footer"></div>-->

</body>


<script>
    $(function () {
        $("#uploadPicture").fileinput({
            uploadUrl: "http://localhost:8080/myuser/uploadIcon",
            previewFileType: "image",
            uploadAsync: true,
            showCaption: false,
            allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp"],
            enctype: 'multipart/form-data',
            //隐藏上传按钮
            showUpload: false,
            //最大上传文件数量
            maxFileCount: 1,
            maxFileSize: 3072,
            showBrowse: true,
            dropZoneTitle: '拖拽头像图片到这里...',
            browseLabel: "选择图片",
            uploadClass: "btn btn-info",
            uploadLabel: "上传",
            removeClass: "btn btn-danger",
            autoReplace: true,
            removeLabel: "移除",
            msgSizeTooLarge: '图片文件太大！',
            msgFilesTooMany: "选择上传的文件数量为({n}) 超过允许的最大数值({m})！",
            msgUploadEnd: '图片上传成功！',
            msgUploadBegin: '初始化中...',
            msgZoomModalHeading: '图片详情预览',
            msgInvalidFileExtension: '非法文件扩展名 "{name}"！ 仅支持 "{extensions}" 的文件扩展名！'
        }).on('fileerror', function (event, data, msg) {
            alert('图片上传失败！' + msg);
        }).on('fileuploaded', function (event, data) {
            $("#picName").val(data.response.name);
            $('#uploadPicture').fileinput('disable');
        }).on('fileclear', function (event) {
            alert("图片被清除啦！");
        });

    });


</script>

</html>
